<template>
	<div class="playing"
  	v-infinite-scroll="loadMore" 
  	infinite-scroll-distance="20"
  	infinite-scroll-disabled="open">
	
		
	<!--这是MIntUI的loading-->
		<mt-spinner v-if="isLoading==true" type="fading-circle" class="loading" :size="60" color="#2096ef"></mt-spinner>
		
	<!--电影列表-->
    <ul class="movie_ul">
	
    	<li v-for="(movies,index) in movieList" :key="movies.id"  class="movies"
    		@click="toMovie(movies.id)"
    		>
    		

    	<div class="movies_img ">
    		<img :src="picFix(movies.img)" alt="" />
    		
    	</div>
    	
    	<div class="content">
    		
    			<h1>{{movies.nm}} <span v-if="movies.version.indexOf('3d')==1"><img src="../img/3d.png"/></span>
    												<span v-else><img src="../img/2d.png"/></span>
    			</h1>
    			<h2  v-if="movieList[index].globalReleased&&movieList[index].sc!=0"> 观众评&nbsp;<span>{{movies.sc}}</span></h2>
    			<h2  v-else-if="movieList[index].globalReleased&&movieList[index].sc==0">暂无评分</h2>
    			<h2  v-else="movieList[index].globalReleased"><span>{{movies.wish}}</span>&nbsp;人想看</h2>
    			
    			<h3>主演：{{movies.star}}</h3>
    			<h4>{{movies.showInfo}}</h4>
    	</div>
    	<div class="btn">
    		
			<button v-if="movieList[index].globalReleased" class="can">购票</button>
			<button v-else class="cannot">预售</button>
			
    	</div>
			
			
			<div class="clear">
    	</div>
    		
    	</li>
    </ul>
    
    
  
	</div>
</template>
<script>

export default {
 
  
  created(){
//	console.log(	this.axios  )

		//http://m.maoyan.com == /maoyan
		
		// 请求 --> 本地服务器(webpack的devServer) --> 猫眼的服务器
		
		//  /maoyan/ajax/movieOninfoList   -->   /ajax/movieOnInfoList		不使用代理
  	this.axios.get('/ajax/movieOnInfoList').then( (res)=>{
//		console.log('正在热映：',res);
		this.total=res.data.total;
  		this.movieList=res.data.movieList;
  		this.mId=res.data.movieIds
		console.log('all id',this.mId);
		this.open=false
  	} )
  	
  	
  	
	this.$store.commit('changeHT','CITY FILMS')
  	
  },
 
 
 
methods:{
  				// 修改图片尺寸
  				picFix(url){
  				 return	url.replace('w.h','128.180')
  				},
  				// 跳转电影页
  				toMovie(id){
  					this.$router.push({name:'movie',params:{movieId:id}})
  				},
  				
  				// 到底加载更多电影ID并遍历
  				loadMore(){
  					if(this.movieList.length==this.total){//判断是否已经没有更多的数据可以加载了
  						    if(this.arriveBottom==false){
								//在ul最后加入  “没有更多了” div节点
								var a = document.getElementsByClassName('movie_ul')[0];
								var btm = document.createElement('btm')
								btm.innerHTML=`<div class="playingnomore">没有更多了...</div>`
								a.appendChild(btm);
								this.arriveBottom=true; // 其实是开关  ，  只新增一次   节点 就不再进来
							}
  						
  					  return
  					}
  					console.log( '到底' ); 
  					this.isLoading=true;
  					var ids=[];	// 用来装新增的 电影id
					for(this.i;this.i<this.j;this.i++){
						if(this.mId[this.i]==undefined){// 没有更多的数据就跳出
							break;
						}else{
							
							ids.push(this.mId[this.i])
						}
					}
					ids=ids.toString()
					console.log("ids", ids); 
//					var ids = ["1215919","1229915","1244914","1229768","78480","1219776","1242941","1208282","1229950","346465"].toString()
//					ids = "1215919,1229915,1244914,1229768,78480,1219776,1242941,1208282,1229950,346465"
					this.axios.get('/ajax/moreComingList',{
						params:{
							token:"",
							movieIds:ids
					}
				}).then( 
					(res)=>{
						console.log( "原来",this.movieList ); 
						
						this.movieList=this.movieList.concat(res.data.coming)
  						this.isLoading=false;
						
						console.log( "改完的list",this.movieList); 
					 } )
					this.j+=12;
  				}
  	
},
  	
	  	data(){
		  	return {
		  		movieList:[],i:12,j:24,open:true,
		  		loading:false,
		  		mId:[],// 全部的电影id
		  		isLoading:false,
		  		total:'',//该页电影信息数据的总数
		  		arriveBottom:false,//到底提示div
		  	}
		  },
  	
  	
}
</script>
